<template>
  <div class="swiper1">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/2.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/3.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/4.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/5.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/6.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/2.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/3.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/4.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/5.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../../../../../public/xiaxia/imgs/6.png" alt="" />
        </div>
      </div>
      <!-- Add Pagination -->
      <!-- <div class="swiper-pagination"></div> -->
    </div>
  </div>
</template>

<script>
import Swiper, { Navigation, Pagination } from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "ActiveSlide",
  mounted() {
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 4,
      spaceBetween: 30,
      centeredSlides: true,
      slidesPerGroup: 1,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};

var mySwiper = new Swiper(".swiper-container", {
  autoplay: {
    delay: 2000,
  },
});
</script>

<style scoped>
.swiper1 {
  width: 100%;
  height: 1.3rem;
  /* margin: 0.2rem 0; */
  overflow: hidden;
  padding: 0.2rem 0;
}

.swiper-slide > img {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
</style>